<template>
  <view class="index-page">
    <u-navbar
      title="我的订单"
      :background="{ background: '#111723' }"
      back-icon-color="#fff"
      title-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    ></u-navbar>
    <u-tabs
      :list="state.olist"
      is-scroll
      active-color="#111723"
      v-model="state.tabCurrent"
      @change="change"
    ></u-tabs>
    <scroll-view
      class="scrool"
      :style="{ height: 'calc(100% - 180rpx)' }"
      :scroll-y="true"
      lower-threshold="30"
      @scrolltolower="bottomOut()"
    >
      <view class="wrap" v-for="(item, index) in state.list" :key="index">
        <span class="silk-ribbon1"
          ><span>{{
            item.order_type === '1'
              ? '首发订单'
              : item.order_type === '2'
              ? '寄售订单'
              : '盲盒订单'
          }}</span></span
        >
        <view
          class="top"
          :style="{
            color:
              item.order_status === '1'
                ? 'blue'
                : item.order_status === '3'
                ? 'green'
                : item.order_status === '4'
                ? 'red'
                : ''
          }"
          >{{ item.order_status_text }}</view
        >
        <view class="center">
          <u-image
            width="180"
            height="180"
            :src="item.commodity_image"
          ></u-image>
          <view class="text">
            <view> {{ item.commodity_name }}</view>
            <view style="font-size: 20rpx"> {{ item.order_sn }} </view>
            <view>价格 ¥{{ item.price }} </view>
          </view>
        </view>

        <view class="bottom">
          <view> {{ item.updatetime }}</view>
          <view style="display: flex" v-if="item.order_status === '1'">
            <u-button
              class="left-button"
              :ripple="true"
              size="medium "
              shape="circle"
              @click="cancelOrderData(item.order_sn)"
              >取消</u-button
            >
            <u-button
              class="left-button"
              :ripple="true"
              size="medium "
              shape="circle"
              @click="payment(item)"
              :custom-style="state.customStyle"
              >支付</u-button
            >
          </view>
        </view>
      </view>
      <u-loadmore
        :status="state.status"
        icon-type="flower"
        margin-top="30"
        margin-bottom="30"
      />
    </scroll-view>
  </view>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { getUserOrderList, cancelOrder } from '@/api/modules/user'
const state = reactive({
  olist: [
    {
      name: '全部'
    },
    {
      name: '待支付'
    },
    {
      name: '支付完成'
    },
    {
      name: '支付失败'
    },
    {
      name: '已取消'
    }
  ],
  customStyle: {
    backgroundImage: 'linear-gradient(to right, #7e50d7, #2138cd)',
    color: '#fff'
  },
  tabCurrent: 0,
  status: 'loadmore',
  list: [] as any,
  page: 0
})
//支付
const payment = (item: any) => {
  uni.navigateTo({
    url: `/pages/payment/index?type=5&orderId=${item.order_sn}`
  })
}
//触底加载数据
const bottomOut = () => {
  if (state.status === 'nomore') return
  state.status = 'loading'
  state.page = ++state.page
  let status =
    state.tabCurrent === 0
      ? 'all'
      : state.tabCurrent === 1
      ? 1
      : state.tabCurrent + 1
  getUserOrderList({
    page: state.page,
    page_size: 30,
    order_status: status
  }).then((result) => {
    state.list.push(...result.data.data)
    if (result.data.data.length < 30) state.status = 'nomore'
    else state.status = 'loading'
  })
}
bottomOut()

//取消订单
const cancelOrderData = (str: string) => {
  cancelOrder({ order_sn: str }).then((result) => {
    uni.showToast({
      title: '取消成功',
      icon: 'success'
    })
    state.status = 'loadmore'
    state.list = []
    state.page = 0
    bottomOut()
  })
}
//
const change = (index: number) => {
  state.status = 'loadmore'
  state.list = []
  state.page = 0
  state.tabCurrent = index
  bottomOut()
}
</script>
<style lang="less" scoped>
::v-deep(.u-hairline-border) {
  ::after {
    border: none !important;
  }
}
.wrap {
  position: relative;
  background-color: #fff;
  margin: 25rpx;
  border-radius: 20rpx;
  padding: 30rpx 30rpx 80rpx 30rpx;
  .silk-ribbon {
    display: flex;
    justify-content: center;
    margin-left: 10rpx;
    height: 150rpx;
    position: relative;
    margin-bottom: 30rpx;
    background-color: #eeeeee;
    color: #ffffff;
  }

  .silk-ribbon:nth-child(even) {
    margin-right: 4%;
  }

  .silk-ribbon1 {
    position: absolute;
    top: -6rpx;
    right: 10rpx;
    color: #fff;
  }

  .silk-ribbon1:after {
    position: absolute;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 53rpx solid transparent;
    border-right: 53rpx solid transparent;
    border-top: 10rpx solid #f8463f;
  }

  .silk-ribbon1 span {
    position: relative;
    display: inline-block;
    text-align: center;
    background-image: linear-gradient(
      to right,
      rgb(126, 80, 215),
      rgb(33, 56, 205)
    );
    font-size: 14px;
    line-height: 1;
    padding: 12rpx 8rpx 10rpx;
    border-top-right-radius: 8rpx;
    width: 150rpx;
  }

  .silk-ribbon1 span:before,
  .silk-ribbon1 span:after {
    position: absolute;
    content: '';
    display: block;
  }

  .silk-ribbon1 span:before {
    background: #f8463f;
    height: 6rpx;
    width: 6rpx;
    left: -6rpx;
    top: 0;
  }

  .silk-ribbon1 span:after {
    background-image: linear-gradient(
      to right,
      rgb(126, 80, 215),
      rgb(33, 56, 205)
    );
    height: 6rpx;
    width: 8rpx;
    border-radius: 8rpx 8rpx 0 0;
    left: -8rpx;
    top: 0;
  }
  .top {
    margin-bottom: 20rpx;
  }
  .center {
    display: flex;
    align-items: center;
    .text {
      margin-left: 40rpx;
      line-height: 60rpx;
    }
  }
  .bottom {
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    color: #919191;
    font-size: 20rpx;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 0 30rpx;
    .left-button {
      width: 100rpx;
      height: 50rpx;
      margin-left: 10rpx;
    }
  }
}
page {
  background-color: #f3f6fd;
  height: 100%;
}
.index-page {
  height: 100%;
}
</style>
